<template>
	<view class="tui-product-list">
		<view class="tui-product-container" >
			<block v-for="(item, index) in data" :key="index" v-if="(index + 1) % 2 != 0" >
				<!--商品列表-->
				<view class="tui-pro-item" hover-class="hover" :hover-start-time="150"  >
					<image 
					@click.native="getDetail(item.id)"
					:src="item.imgUrl.split(',')[0]" class="tui-pro-img" mode="widthFix" />
					<view class="tui-pro-content">
						<view class="tui-pro-tit">{{ item.title }}</view>
						<view>
							<view class="tui-pro-user" >
								<view class=".article-info">
									<image :src="item.appAvatar" class="tui-avatar"></image>
									<span class="tui-nickname">{{item.nickname}}</span>
								</view>
								
								<view class=".article-info">
									<tui-icon v-if="item.isLike == '否'" size="16" name="like" color="#838B8B" @click.native="like(item.id, index)"></tui-icon>
									<tui-icon v-if="item.isLike == '是'" size="16" name="like-fill" color="#EE2C2C" @click.native="removelike(item.id, index)"></tui-icon>
									<span>{{item.likeNum}}</span>
									<!-- <tui-icon size="16" name="community-fill" color="#838B8B"></tui-icon>
									<span>{{item.commentNum}}</span> -->
								</view>
							</view>
						</view>
					</view>
				</view>
			</block>
		</view>
		<view class="tui-product-container">
			<block v-for="(item, index) in data" :key="index" v-if="(index + 1) % 2 == 0" >
				<!--商品列表-->
				<view class="tui-pro-item" hover-class="hover" :hover-start-time="150" @click.native="getDetail(item.id)" >
					<image 
					@click.native="getDetail(item.id)"
					:src="item.imgUrl.split(',')[0]" class="tui-pro-img" mode="widthFix" />
					<view class="tui-pro-content">
						<view class="tui-pro-tit">{{ item.title }}</view>
						<view>
							<view class="tui-pro-user" >
								<view class=".article-info">
									<image :src="item.appAvatar" class="tui-avatar"></image>
									<span class="tui-nickname">{{item.nickname}}</span>
								</view>
								
								<view class=".article-info">
									<tui-icon v-if="item.isLike == '否'" size="16" name="like" color="#838B8B" @click.native="like(item.id, index)"></tui-icon>
									<tui-icon v-if="item.isLike == '是'" size="16" name="like-fill" color="#EE2C2C" @click.native="removelike(item.id, index)"></tui-icon>
									<span>{{item.likeNum}}</span>
									<!-- <tui-icon size="16" name="community-fill" color="#838B8B"></tui-icon>
									<span>{{item.commentNum}}</span> -->
								</view>
							</view>
						</view>
					</view>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
    
	export default {
		props: {
			data: {}
		},
		data() {
			return {
			   
			}
		},
		onLoad(){
			
		},
		methods: {
			getDetail(id){
				if(this.checkReLogin()) return;
				uni.navigateTo({
					url:"/pages/index/article/article-info?id=" +  id
				})
			},
			like(id, index){
				if(this.checkReLogin()) return;
				let _this = this;
				_this.$api.addArticleLike({tid: id}).then(res => {
					if(res.success){
						_this.data[index]['isLike'] = '是';
						_this.data[index]['likeNum'] = _this.data[index]['likeNum'] + 1;
					}
				})
			},
			removelike(id, index){
				if(this.checkReLogin()) return;
				let _this = this;
				_this.$api.removeArticleLike({tid: id}).then(res => {
					if(res.success){
						_this.data[index]['isLike'] = '否';
						_this.data[index]['likeNum'] = _this.data[index]['likeNum'] - 1;
					}
				})
			},
			checkReLogin(){
				let flag = false;
				let userInfo = uni.getStorageSync("user_info");
				if(userInfo == null || userInfo == '' || userInfo.mobile == '' || userInfo.mobile == null){
					uni.switchTab({
						url: '/pages/my/index?tag=relogin'
					})
					flag = true;
					return flag;
				}
				
			},
			
		}
	}
</script>

<style lang="scss">
	@import './article.css'
</style>
